﻿<style scoped>

    #tableStyleBizPoint + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: auto;
        line-height: 30px;
        padding: 0 5px;
    }

    .tdImg {
        width: 35px;
        max-width: none;
        cursor: pointer;
    }

    .layui-table-view {
        margin: 0;
    } 


</style>

<!-- 正文开始 -->
<div class="layui-fluid" style="padding: 5px;">
    <div class="layui-card" style="box-shadow:none;">
    	<div class="layui-card-header">
    		<span style="color: red;">仅供二次开发使用，请勿随意改动！</span>
			  <div class="layui-btn-group" style="float: right;">
			   	<button type="button" class="layui-btn layui-btn-sm" id="btnAddbizSceneMenuFolder">
			   		新增
			   	</button>
			  </div>
    	</div>
        <div class="layui-card-body" style="padding:0px;">
        	<ul id="bizSceneMenuTree" class="ztree" style="max-height: calc(100vh - 160px);overflow-y: auto;"></ul>
        </div>
    </div>
</div>

<!-- 表单弹窗 -->
<script type="text/html" id="modelBizSceneMenu"> 
	<form id="modelBizSceneMenuForm" lay-filter="modelBizSceneMenuForm" class="layui-form model-form" style="padding: 1px;" >
	    	<input name="id" type="hidden"/>
			<input name="sceneId" type="hidden" value="#(sceneId)"/>
			<table class="formTable">
				<tr>
					<td>上级</td>
					<td >
						<input id="parentId" type="text" name="parentId"   lay-filter="parentId" autocomplete="off" placeholder="请选择" value="" class="layui-input">
					</td>
				</tr>
				<tr>
					<td>名称</td>
					<td >
						<input name="name" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td>标识</td>
					<td >
						<input name="code" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" required/>
					</td>
				</tr>
				<tr>
					<td>关联标识</td>
					<td >
						<input name="relationship" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" required/>
					</td>
				</tr>
				<tr>
					<td>类型</td>
					<td>
	                	<select name="type" lay-filter="type"  lay-verify="required" required>
							<option value="">--请选择--</option>
							<option value="0">页面【0】</option>
				        	<option value="1">默认显示【1】</option>
							<option value="2">控制资源【2】</option>
							<option value="3">下拉框【3】</option>
							<option value="4">树【4】</option>
							<option value="Folder">目录</option>
							<option value="Map">地图</option>
							<option value="Point">点</option>
							<option value="Line">线</option>
							<option value="Polygon">面</option>
							<option value="Model">模型</option>
				      	</select>
					</td>
				</tr>
				<tr>
					<td>渲染方式</td>
					<td>
	                	<select name="isDisplay" lay-filter="isDisplay"  lay-verify="required" required>
							<option value="0">Primitive</option>
				        	<option value="1">Entity</option>
				      	</select>
					</td>
				</tr>
				<tr>
					<td>图标</td>
					<td >
						<input name="icon" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" required/>
					</td>
				</tr>
				<tr>
					<td>url</td>
					<td >
						<input name="url" placeholder="" autocomplete="off"   type="text" class="layui-input" maxlength="50" lay-verType="tips" required/>
					</td>
				</tr>
				<tr>
					<td>序号:</td>
					<td >
						<input name="sort" autocomplete="off"   placeholder="请输入序号" type="number" class="layui-input" maxlength="20"  
                       lay-verType="tips" lay-verify="required" required/>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button class="layui-btn layui-btn-sm" lay-filter="submitBizSceneMenuForm" lay-submit>保存</button>
					</td>
				</tr>
			</table>
	</form>    
</script>

<!-- js部分 -->
<SCRIPT type="text/javascript">
layui.use(['layer','form','upload'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
	var form =layui.form;
	var upload =layui.upload;
	var setting = {
		async: {
			enable: true,
			url: "#(ctx)/biz/scene/menu/getTree?sceneId=#(sceneId)",
			autoParam:["id", "name=n", "level=lv"],
			//dataFilter: filter,
		},
		view: {
			expandSpeed:"",
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		callback: {
			onClick:onClick,
			beforeDblClick:beforeDblClick,
		}
	};
	
	/**
		添加鼠标事件	
	*/
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		
/* 		if('0'==treeNode.type &&  !$("#editFolderBtn_"+treeNode.tId).length>0){
			var addStr= "<span class='button edit' id='editFolderBtn_" + treeNode.tId+ "' title='编辑' onfocus='this.blur();'></span>";
			sObj.append(addStr);
			var editBtn = $("#editFolderBtn_"+treeNode.tId);
			if (editBtn) editBtn.bind("click", function(){
				addFolder(treeNode);
				return false;
			});
		} */
		
 		if(!$("#editMenuBtn_"+treeNode.tId).length>0){
 			var addStr= "<span class='button edit' id='editMenuBtn_" + treeNode.tId+ "' title='编辑' onfocus='this.blur();'></span>";
 			addStr += "<span class='button view' id='viewMenuBtn_" + treeNode.tId+ "' title='视角' onfocus='this.blur();'></span>";
 			addStr += "<span class='button details' id='detailsMenuBtn_" + treeNode.tId+ "' title='详情' onfocus='this.blur();'></span>";
 			addStr += "<span class='button remove' id='delMenuBtn_" + treeNode.tId+ "' title='删除' onfocus='this.blur();'></span>";

 			sObj.append(addStr);
 			var editBtn = $("#editMenuBtn_"+treeNode.tId);
 			if (editBtn) editBtn.bind("click", function(){
 				addFolder(treeNode);
 				return false;
 			});
 			
 			var viewMenu = $("#viewMenuBtn_"+treeNode.tId);
 			if (viewMenu) viewMenu.bind("click", function(){
 				settingView(treeNode);
 				return false;
 			});
 			
 			var detailsMenu = $("#detailsMenuBtn_"+treeNode.tId);
 			if (detailsMenu) detailsMenu.bind("click", function(){
 				showLayerModel('#(sceneId)',treeNode.id);
 				return false;
 			});
 			
			var delBtn = $("#delMenuBtn_"+treeNode.tId);
			if (delBtn) delBtn.bind("click", function(){
				del(treeNode);
				return false;
			})
 		}
/* 		if(!$("#delMenuBtn_"+treeNode.tId).length>0){
 			var addStr= "<span class='button remove' id='delMenuBtn_" + treeNode.tId+ "' title='删除' onfocus='this.blur();'></span>";
 			sObj.append(addStr);
			var delBtn = $("#delMenuBtn_"+treeNode.tId);
			if (delBtn) delBtn.bind("click", function(){
				del(treeNode);
				return false;
			});
		} */
		

	};
	function removeHoverDom(treeId, treeNode) {
		/* $("#editFolderBtn_"+treeNode.tId).unbind().remove(); */
 		$("#editMenuBtn_"+treeNode.tId).unbind().remove();
		$("#detailsMenuBtn_"+treeNode.tId).unbind().remove();
		$("#viewMenuBtn_"+treeNode.tId).unbind().remove();
		$("#delMenuBtn_"+treeNode.tId).unbind().remove();
	};
	$(document).ready(function(){
		$.fn.zTree.init($("#bizSceneMenuTree"), setting);
		sceneTree= $.fn.zTree.getZTreeObj("bizSceneMenuTree");
	});
		
	$('#btnAddbizSceneMenuFolder').click(function () {
		 addFolder();
	});
	
	function beforeDblClick (treeId, treeNode) {
		if(!treeNode)return;
		layer.load(2);
 		var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/getBizSceneMenuById",{id:treeNode.id}, "json", null);
 	 	layer.closeAll('loading');
 		if(200==res.code){
 			if(res.data.cameraX && res.data.cameraY && res.data.cameraZ){
 				editMarker.viewer.camera.flyTo({
 	    		    destination : new Cesium.Cartesian3(res.data.cameraX*1,res.data.cameraY*1, res.data.cameraZ*1),
 	    		    orientation : {
 	    		        heading : res.data.heading*1,
 	    		        pitch : res.data.pitch*1,
 	    		        roll : res.data.roll*1
 	    		    }
 	    		});
 	    	}
 		}
	}
	
	var state=false;
	function onClick(event,treeId,treeNode){
		console.log(treeNode);
		if(treeNode&& treeNode.type){
			if(globe && (treeNode.type=='0')){
				globe.getPageSrcById({
					pageId:treeNode.id,
					progress:function(e){
						console.log(e);
					}
				});
			}
			else if(globe && (
					treeNode.type=='Point' || treeNode.type=='point' || treeNode.type=='Points' ||
					treeNode.type=='Line' || treeNode.type=='line'  || treeNode.type=='Lines' ||
					treeNode.type=='Polygon' || treeNode.type=='polygon' || treeNode.type=='Polygons' ||
					treeNode.type=='Model' || treeNode.type=='3DTILES' || treeNode.type=='GLTF' || treeNode.type=='Models' ||
					treeNode.type=='Map' || treeNode.type=='Maps' || treeNode.type=='map' || treeNode.type=='terrain' ||
					treeNode.type=='division' ||treeNode.type=='road' 
				)){
				state=state==false?true:false;
				globe.showOrHideLayer({
					id:treeNode.id,
					type:treeNode.type,
					state:state,
					progress:function(state,message){
						console.log(state,message);
					}
				});
			}
		}
		return false;
	}
	
	
	function del(treeNode){
        layer.confirm('确定要删除“【<span style="color:red;">' + treeNode.name + '</span>】”吗？', {
            skin: 'layui-layer-admin',
            shade: .1
        }, function (index) {
            layer.close(index);
            layer.load(2);
	        var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/delete",{id:treeNode.id}, "json", null);
	        layer.closeAll('loading');
	        if (200==res.code) {
	            layer.msg(res.message, {icon: 1});
	    		var treeObj = $.fn.zTree.getZTreeObj("bizSceneMenuTree");
	    		if(treeNode&&treeObj){
	    			treeObj.removeNode(treeNode);
	    		}
	    		editMarker.scenePrimitiveForRemove({
	    			id:treeNode.id,
	    			type:treeNode.type,
	    		})
	            return true;
	        } else {
	            layer.msg(res.message, {icon: 2});
	            return false;
	        }
        }, function (index) {
            layer.close(index);
            return false;
        }); 
	}
	
	function addFolder(data){
        layer.open({
            type: 1,
            title: '场景菜单',
            content: $('#modelBizSceneMenu').html(),
            area:'400px',
            offset: 't',
            success: function (layero, dIndex) {
           	 	$(layero).children('.layui-layer-content').css('overflow', 'visible');
           	 	
           	 	if(data){
           	 		layer.load(2);
           	 		var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/getBizSceneMenuById",{id:data.id}, "json", null);
           	 	 	layer.closeAll('loading');
           	 		if(200==res.code){
           	 			data=res.data;
           	 		}else{
           	 			layer.close(dIndex);
           	 		 	layer.msg(res.message, {icon: 2});
        	    		var zTree = $.fn.zTree.getZTreeObj("bizSceneMenuTree");
        	    		if(zTree){
        	    			var node =zTree.getNodeByParam("id",data.id);
        	    			if(node){
        	    				zTree.removeNode(node);
        	    			}
        	    		}
           	 		 	return;
           	 		}
           	 	}
           	 	
           	 	
        	    treeSelect.render({
        	        elem: '#parentId',
        	        data: '#(ctx)/biz/scene/menu/getTree?sceneId=#(sceneId)&type=select',
        	        type: 'get',
        	        placeholder: '请选择',
        	        search: true,
        	        click: function(d){
        	        },
        	        success: function (d) {
        	        	if(data && data.parentId!='root')
                    	treeSelect.checkNode('parentId', data.parentId);
        	        }
        	    });
           	 	
           	 	
                form.val('modelBizSceneMenuForm', data); 
                // 表单提交事件
                form.on('submit(submitBizSceneMenuForm)', function (fData) {
                    if (fData.field.parentId == '') {
                    	fData.field.parentId = 'root';
                    }
                    layer.load(2);
                    var formData={}; 
                    for(var key in fData.field){
                    	formData['bizSceneMenu.'+key]=fData.field[key];
                    }
			        var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/save",formData, "json", null);
			        layer.closeAll('loading');
			        if (200==res.code) {
			        	layer.close(dIndex);
			            layer.msg(res.message, {icon: 1});
			            var newNode=res.data;
						var zTree = $.fn.zTree.getZTreeObj("bizSceneMenuTree");
						if(zTree){
							if(!data){
    							var treeNode =zTree.getNodeByParam("id",newNode.parentId);
    							zTree.addNodes(treeNode?treeNode:null, {id:newNode.id, pId:newNode.parentId, name:newNode.name,type:newNode.type});
							}else{
								var editNode =zTree.getNodeByParam("id",res.data.id);
								if(editNode){
									editNode.name=res.data.name;
									console.log(editNode);
									zTree.updateNode(editNode);
								}
							}
						}
			        } else {
			            layer.msg(res.message, {icon: 2});
			        }
                    return false;
                });
            	
            }
        });
	}
	
	function settingView(data){
		layer.load(2);
 		var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/getBizSceneMenuById",{id:data.id}, "json", null);
 		if(200==res.code){
 			var visualPos=VFG.Util.getVisualAngle(viewer);
 			if(visualPos){
 				var formData={}; 
 	            for(var key in res.data){
 	            	formData['bizSceneMenu.'+key]=res.data[key];
 	            }
 	            formData['bizSceneMenu.heading'] = visualPos.heading;
 	           	formData['bizSceneMenu.pitch'] = visualPos.pitch;
 	          	formData['bizSceneMenu.roll'] = visualPos.roll;
 	         	formData['bizSceneMenu.cameraX'] = visualPos.position.x;
 	        	formData['bizSceneMenu.cameraY'] = visualPos.position.y;
 	            formData['bizSceneMenu.cameraZ'] = visualPos.position.z;
 	            console.log(formData);
 	            var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/save",formData, "json", null);
 		        layer.closeAll('loading');
 		        if (200==res.code) {
 		            layer.msg(res.message, {icon: 1});
 		        } else {
 		            layer.msg(res.message, {icon: 2});
 		        }
 			}
 		}else{
 			layer.msg(res.message, {icon: 2});
 		}
	}
	
    // 权限管理
    function showLayerModel(sceneId,parentId) {
        layer.open({
            title: '场景图层资源',
            btn: ['保存', '取消'],
            offset: 't',
            content: '<ul id="treeAuth" class="ztree"></ul>',
            success: function (layero, index) {
                $(layero).children('.layui-layer-content').css({'max-height': '500px', 'overflow': 'auto'});
                layer.load(2);
                var setting = {check: {enable: true,chkboxType :{ "Y" : "", "N" : "" }}, data: {simpleData: {enable: true}}};
                var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/getLayerTree",{
                	sceneId: sceneId,
                	parentId: parentId
                }, "json", null);
                if(res){
                    $.fn.zTree.init($('#treeAuth'), setting, res);
                    layer.closeAll('loading');
                }
            },
            yes: function (index) {
                layer.load(2);
                var treeObj = $.fn.zTree.getZTreeObj('treeAuth');
                var nodes = treeObj.getCheckedNodes(true);
                if(nodes.length>0){
                	 var res = common_ajax.ajaxFunc(ctx+"/biz/scene/menu/saveLayerNode",{
                     	sceneId: sceneId,
                     	parentId: parentId,
                     	nodes:JSON.stringify(nodes)
                     }, "json", null);
                	 layer.closeAll('loading');
                	 if(res){
                         if (200 == res.code) {
                             layer.msg(res.message, {icon: 1});
                             layer.close(index);
                             var treeObj = $.fn.zTree.getZTreeObj("bizSceneMenuTree");
                             if(treeObj){
                            	 treeObj.reAsyncChildNodes(null, "refresh");
                             }
                         } else {
                             layer.msg(res.message, {icon: 2});
                         } 
                	 }else{
                		 layer.msg("服务异常！", {icon: 2});
                	 }
                }
            }
        });
    }
	
});

var _Ajax = function(reqType, url, data, dataType, callback) {
	$.ajax({
		type: reqType,
		url: encodeURI(encodeURI(url)),
		data: data,
		dataType: dataType ? dataType : 'html',
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		async: false,
		cache: false,
		success: function(response) {
			if (callback != null) {
				callback(response);
			}
		}
	});
}


	
</SCRIPT>